<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>{$details['title']}</title>
    <meta name="keywords" content="重庆新闻,我爱大重庆,重庆,热点新闻,微信资讯" />
    <meta name="description" content="我爱大重庆资讯平台是我爱大重庆公众平台的附属产品，旨在为我爱大重庆的用户提供一个便捷的实时资讯浏览平台" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap.min.css">
    <style>
        body{
            background:#FFF;
            overflow-x: hidden;
        }
        .head{
            width:40px;
            height:40px;
            /*margin-top:0px;*/
            /*display: block;*/
            margin:0 auto;
            text-align: center;
        }
        .nickname{
            width:100%;
            display:block;
            margin:0 auto;
            text-align:center
        }
        embed{
            width:100% !important;
        }
        .content>p{
            padding-top:10px;
        }
        .content>p>img{
            width:100% !important;
        }
        blockquote {
            padding: 0px 5px;
            margin: 0 0 0px;
            font-size: 14px;
            border-left: 5px solid #eee;
            max-height: 60px;
            overflow: hidden;
        }
        .hidden-now{
            color: #FFF !important;
        }
        ul{
            list-style: none;
            padding-left:0;
            margin-left:0;
        }
        .content{
            margin:auto 3%;
            line-height: 1.8;
        }
        .content > img{
            width:100%;
        }
        .pl{
            width:100%;
            /*border-radius: 5px;*/
            margin:0 auto;
            box-shadow: 0px 0px 5px #777;
            margin-bottom: 35px;
            /*border-top: 5px solid red;*/
        }
        h3{
            padding:0;
            margin:3px;
            margin-left:10px;
            margin-top: 10px;
        }
        h4{
            margin-left:10px;
        }
        li{
            border-top:1px solid #CCC;
            border-bottom:1px solid #CCC;
            float: left;
            width:100%;
            padding-top: 10px;
            padding-bottom: 10px;
        }
        .right{
            float: right;
        }
        .up,.down{
            margin:0 10px;
            font-size:18px;
        }
        .yes-left{
            float: left;
            width:40px;
            height:40px;
            line-height: 40px;
            background: #5BC0DE;
            color:#FFF;
            text-align:center;
            border-radius: 100%;
        }
        .yes-right{
            float: right;
            width:40px;
            height:40px;
            line-height: 40px;
            background: #D9534F;
            color:#FFF;
            text-align:center;
            border-radius: 100%;
            transform: rotate(180deg);
            -ms-transform: rotate(180deg);
            -webkit-transform: rotate(180deg);
        }
        .progress{
            height: 30px;
            margin-bottom: 0;
        }
        .progress-bar{
            line-height: 30px;
            height:30px;
        }
        .progress-bottom{
            margin:20px auto;
            font-size:26px;
        }
        .button-width{
            width:100%;
            text-align:left;
            padding-left:0;
            margin-bottom: 0;
        }
        .button-width>button{
            border-top-left-radius: 0;
            border-top-right-radius: 0 !important;
            border-right:0 !important;
            height:40px;
            border-left:0 !important;
            padding-top:10px;
            padding-bottom: 10px;
            position: relative;
            line-height:40px;
            /*margin:5px auto;*/
        }
        .button-width>button>div{
            margin-left:20px;
        }
        .btn-default{
            text-align:left;
        }
        .footer{
            position: fixed;
            /*z-index: 99999;*/
            bottom: 0;
            width:100%;
            height:40px;
            box-shadow: 0px 0px 20px #777;
            background:#FFF;
        }
        .footer>button{
            width:100%;
            height: 40px;
            border:0;
            margin:0px auto;
        }
        .margin-bottom{
            height:30px;
        }
        .header{
            position: fixed;
            z-index: 9;
            top: 0;
            width:100%;
            height:40px;
            box-shadow: 0px 0px 20px #777;
            background:#FFF;
        }
        .header>button{
            width:100%;
            height: 40px;
            border:0;
            margin:0px auto;
        }
        #cover{
            display:none;
            position:absolute;
            left:0;
            top:0;
            z-index:29;
            background-color:#000000;
            opacity:0.7;
        }
        #guide{
            display:none;
            position:absolute;
            right:18px;
            top:5px;
            z-index:29;
        }
        #guide img{
            width: 230px;
            z-index:91;
        }
        .button-width > .tp-now > .progress{
            /*margin:10px auto;*/
            border-radius: 0;
            position: relative;
        }
        .button-width > .tp-now > .progress > .progress-bar{
            text-align:left !important;
        }
        .tp-now{
            margin:10px auto;
        }
        .tp-now label{
            padding-top:10px;
        }
        .people{
            position: absolute;
            right: 5px;
            top: 5px;
        }
        .content{
            font-size: 20px !important;
        }
        iframe{
            width:100% !important;
        }
        .replay{
            background:#F3F3F3;
            margin:0;
            padding:0;
            padding-left: 5px;
            padding-top:5px;
            margin-bottom: 10px;
        }
        .replay-name{
            font-size:12px;
            display:block
        }
        .replay-time{
            font-size:10px;
            float:left;
            width:auto;
            display:block
        }
        .replay-from{
            float:left;
            font-size:10px;
            margin-left:10px
        }
        .replay-p1{
            width: 100%;
            height:16px;
            margin-bottom: 5px;
        }
        .replay-content{
            float:left;
            font-size:14px;
            line-height: 1.5;
            margin-bottom: 5px;
            color:#666;
        }
        .button-top{
            width:80% !important;
            text-align: center;
            float: left;
        }
        .share{
            border:0;
            border-radius:0;
            float:right;
            text-align: center;
            width:20% !important;
        }
        #textarea{
            width:100% !important;
        }
        #replay-label1{
            display: block !important;
        }
        .click-ul{
            margin-bottom: 0 !important;
        }
        .container-fluid,.col-lg-12,.row{
            margin-left: 0 !important;
            margin-right: 0 !important;
            padding-left: 0 !important;
            padding-right: 0 !important;
        }
        .loading{
            width:80px;
            height:80px;
            position: fixed;
            top:50%;
            left:50%;
            margin-left:-40px;
            margin-top:-40px;
            display: none
        }
    </style>
</head>



<body data-spy="scroll" data-target="#navbar-example">

<div id="cover"></div>
<div id="guide"><img src="__PUBLIC__/images/share.png"></div>

<div class="header">
    <button type="button" class="btn" id="back" onclick="javascript:history.go(-1)" style="background:#FFF;border:0;border-radius:0;width:20%;text-align: center;float: left"> <span class="glyphicon glyphicon-chevron-left"></span></button>
    <button type="button" class="btn btn-default button-top">
        <span>消息中心</span>
    </button>
</div>

<div class="margin-bottom" style="height: 45px"></div>
<div class="container-fluid">
    <div class="row">
        <div class="col-lg-12">
            <div class="row pl">
                <div>
                    <ul class="click-ul">

                        <foreach name="list" item="list">
                            <li>
                                <div class="col-xs-2">
                                    <img src="{$list['userimg']}" alt="" title="" class="img-circle head">
                                </div>
                                <div class="col-xs-10">
                                    <label class="reply-name" style="margin-right:15px">{$list['nickname']|strCut=###,26}</label>
                                    <span class="" style="float: right;color:#AAA"><span class=" glyphicon glyphicon-map-marker"></span> 来自{$list['province']}</span>
                                    <?php reply($list['reply']) ?>
                                    <p class="user-content" style="float:left;margin-top:0;">{$list['content']}</p>
                                </div>
                                <div class="col-xs-12">
                                    <span class="" style="color:#AAA">{$list['createtime']|timeFormat=###}</span>
                                    <span class="right math-right">{$list['up']}</span><span data-type="up" data-id="{$list['id']}"  class="click-up glyphicon glyphicon-thumbs-up right up" style="<?php if(cookie($list['id']) == 1){ echo 'color:red';}else{echo 'color:#333';} ?>" aria-hidden="true"></span>
                                    <span class="right click-reply" data-toggle="modal" data-tid="{$list['tid']}"  data-reply-openid="{$list['openid']}" data-reply="{$list['id']}" data-target="#replay">回复</span><span  data-toggle="modal" data-target="#replay" data-type="up"  data-tid="{$list['tid']}"  data-reply-openid="{$list['openid']}" data-reply="{$list['id']}"  class="click-reply glyphicon glyphicon-comment right up" style="margin-right: 2px;" aria-hidden="true"></span>
                                </div>
                            </li>
                        </foreach>
                        <div class="before"></div>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>
<span class="limit" style="display: none">20</span>
<img src="__PUBLIC__/images/news-loading.gif" class="loading">

<!-- Modal -->
<div class="modal fade" id="replay" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document" style="margin-top:5px">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="replay-text">回复<span id="reply-name"></span></h4>
            </div>
            <div class="modal-body">
                <!--<label id="replay-label1" for="textarea">-->
                    <!--<input class="form-control user-reply-content" id="textarea" disabled="disabled" value="">-->
                <!--</label>-->
                <input class="form-control" id="replay-content" name="content" placeholder="输入回复内容" type="text">
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" data-dismiss="modal" id="hf">回复</button>
            </div>
        </div>
    </div>
</div>

<input type="hidden" name="id" value="{$details['id']}" id="id">
<script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdn.bootcss.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script>
    $(function(){
        $(document).on("click", ".click-up", function(){
            var k = $(this);
            var m = k.parent().find('.math-right');
            var mv = m.html();
            k.css('color','red');
            var comment_id = k.attr('data-id');
            var type = k.attr('data-type');
            $.post('{:U("News/top")}',{id:comment_id,type:type},function(data){
                if(data == 1){
                    alert('请不要重复点击哦');
                }else{
                    m.html(parseInt(mv)+parseInt(1))
                }
            })
        });
        $(document).on("click", ".click-reply", function(){
            var reply = $(this).attr('data-reply');
            $('#hf').attr('data-reply',reply);
            var content = $(this).parent().parent().find('.user-content').html();
            $('#textarea').val(content);
            var tid = $(this).attr('data-tid');
            $('#hf').attr('data-tid',tid);
            var replyid = $(this).attr('data-reply-openid');
            $('#hf').attr('data-reply-openid',replyid);
            var replyname = $(this).parent().parent().find('.reply-name').html();
            $('#reply-name').html(replyname);
        });

        $('#hf').click(function(){
            var content = $('#replay-content').val();
            if(content == '' || content == ''){
                alert('内容不能为空哦');
            }else{
                $.ajax({
                    url:"{:U('News/MessageCenterReply')}",
                    type:"post",
                    dataType:'text',
                    data:{
                        content:content,
                        tid:$(this).attr('data-tid'),
                        reply:$(this).attr('data-reply'),
                        replyopenid:$(this).attr('data-reply-openid')
                    },
                    success:function(){
                        alert('发表成功！');
                        $('#content').val('');
                        $('#content').blur();
                        $('#myModal').hide();
                        $(this).hide();
                        $('#back').show();
                        $('#shen').show();
                    }
                })
            }
        })
    })

    //获取滚动条当前的位置
    function getScrollTop() {
        var scrollTop = 0;
        if (document.documentElement && document.documentElement.scrollTop) {
            scrollTop = document.documentElement.scrollTop;
        }
        else if (document.body) {
            scrollTop = document.body.scrollTop;
        }
        return scrollTop;
    }

    //获取当前可是范围的高度
    function getClientHeight() {
        var clientHeight = 0;
        if (document.body.clientHeight && document.documentElement.clientHeight) {
            clientHeight = Math.min(document.body.clientHeight, document.documentElement.clientHeight);
        }
        else {
            clientHeight = Math.max(document.body.clientHeight, document.documentElement.clientHeight);
        }
        return clientHeight;
    }
    //获取文档完整的高度
    function getScrollHeight() {
        return Math.max(document.body.scrollHeight, document.documentElement.scrollHeight);
    }

    $(function(){
        window.onscroll = function () {
            if (getScrollTop() + getClientHeight() == getScrollHeight()) {
                var id = $('#id').val();
                var limit = $('.limit').html();
                $('.loading').show();
                $.post('{:U("News/MessageCenter")}', {limit:limit}, function (data) {
                    var obj = eval('('+data+')');
                    var str = "";
                    for (var a in obj) {
                            str += "<li>" +
                            "<div class='col-xs-2'>"+
                            "<img src='"+obj[a]['userimg']+"' alt='' title='' class='img-circle head'> " +
                            "</div> " +
                            "<div class='col-xs-10'> " +
                            "<label style='margin-right:15px'>"+obj[a]['nickname']+"</label> " +
                            "<span class='' style='float: right;color:#AAA'>" +
                            "<span class='glyphicon glyphicon-map-marker'>" +
                            "</span> 来自"+obj[a]['province']+"</span> " +
                            reply(obj[a]['replyc'])
                            +
                            "<p class='user-content' style='float:left;margin-top:0;'>"+obj[a]['content']+"</p> " +
                            "</div> " +
                            "<div class='col-xs-12'> " +
                            "<span class='' style='color:#AAA'>"+getDateDiff(obj[a]['createtime'])+"</span> " +
                            "<span class='right math-right'>"+obj[a]['up']+"</span>" +
                            "<span data-type='up' data-id='"+obj[a]['id']+"'  class='click-up glyphicon glyphicon-thumbs-up right up'  aria-hidden='true'></span> " +
                            "<span class='right click-reply' data-toggle='modal' data-tid='"+obj[a]['tid']+"'  data-reply-openid='"+obj[a]['openid']+"' data-reply='"+obj[a]['id']+"' data-target='#replay'>回复</span>" +
                            "<span  data-toggle='modal' data-target='#replay' data-type='up'  data-tid='"+obj[a]['tid']+"'  data-reply-openid='"+obj[a]['openid']+"' data-reply='"+obj[a]['id']+"' class='click-reply glyphicon glyphicon-comment right up' style='margin-right: 2px;' aria-hidden='true'></span> " +
                            "</div> </li>";

                    }
                    $('.before').before(str);
                    $('.loading').hide();
                    $('.limit').html(parseInt(limit)+parseInt(20))
                });
            }
        }
    })
        function reply(arr){
            var a = "<div class='replay col-xs-12'> " +
            "<label class='replay-name'>"+arr['nickname']+"</label> " +
            "<p class='replay-p1'> " +
            "<span class='replay-time'>"+getDateDiff(arr['createtime'])+"</span> " +
            "<span class='replay-from'><span class='glyphicon glyphicon-map-marker'></span> 来自"+arr['province']+"</span> " +
            "</p> " +
            "<p class='replay-content'>"+arr['content']+"</p> " +
            "</div>";
            return a ;
        }
        function getDateDiff(dateTimeStamp){
            var minute = 1000 * 60;
            var hour = minute * 60;
            var day = hour * 24;
            var month = day * 30;
            var now = new Date().getTime();
            var diffValue = parseInt(now) - parseInt(dateTimeStamp+'000');
//            alert(diffValue)
            if(diffValue < 0){
                //若日期不符则弹出窗口告之
                //alert("结束日期不能小于开始日期！");
            }
            var monthC =diffValue/month;
            var weekC =diffValue/(7*day);
            var dayC =diffValue/day;
            var hourC =diffValue/hour;
            var minC =diffValue/minute;
            if(monthC>=1){
                result= parseInt(monthC) + "个月前";
            }
            else if(weekC>=1){
                result=parseInt(weekC) + "周前";
            }
            else if(dayC>=1){
                result= parseInt(dayC) +"天前";
            }
            else if(hourC>=1){
                result= parseInt(hourC) +"小时前";
            }
            else if(minC>=1){
                result= parseInt(minC) +"分钟前";
            }else
                result="刚刚发表";
            return result;
        }
   function getreply(id,callBack){
//            var str = '';
        $.ajax({
            url:"{:U('News/GetReply')}",
            type:"post",
            dataType:'text',
            data:{id:id},
            success:function(data){
                var reply = eval('('+data+')');
                var a = '';
                if(data == 0){
                    a = "<p style='width:100%;height:2px;margin:0;padding:0'></p>";
                }else{
                    a = "<div class='replay col-xs-12'> " +
                    "<label class='replay-name'>"+reply['nickname']+"</label> " +
                    "<p class='replay-p1'> " +
                    "<span class='replay-time'>"+reply['createtime']+"</span> " +
                    "<span class='replay-from'><span class='glyphicon glyphicon-map-marker'></span> 来自"+reply['province']+"</span> " +
                    "</p> " +
                    "<p class='replay-content'>"+reply['content']+"</p> " +
                    "</div>";
                }
//                document.write(a)
//                function callback(){
                    callBack(a);
//                }
            }
        })
//            return str;
    }
</script>
</body>
</html>
